import React from 'react';
import { useTodo } from '../context/TodoContext';
import TodoList from '../components/TodoList';

function Home({ navigationContext }) {
  const { todos, getStats, isInitialized } = useTodo();
  
  if (!isInitialized) {
    return <div>加载中...</div>;
  }
  
  const stats = getStats();
  
  // 获取最近添加的 5 个待办事项
  const recentTodos = [...todos]
    .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
    .slice(0, 5);
  
  return (
    <div>
      <h2 className="demo3-page-title">待办事项概览</h2>
      
      <div className="demo3-stats">
        <div className="demo3-stat-card">
          <div className="demo3-stat-number">{stats.totalTodos}</div>
          <div className="demo3-stat-label">总待办事项</div>
        </div>
        <div className="demo3-stat-card">
          <div className="demo3-stat-number">{stats.completedTodos}</div>
          <div className="demo3-stat-label">已完成</div>
        </div>
        <div className="demo3-stat-card">
          <div className="demo3-stat-number">{stats.completionRate}%</div>
          <div className="demo3-stat-label">完成率</div>
        </div>
      </div>
      
      <h3>分类统计</h3>
      <ul>
        <li>
          <button 
            onClick={() => navigationContext.navigate('/work')}
            className="demo3-link"
          >
            工作待办事项: {stats.workTodos}
          </button>
        </li>
        <li>
          <button 
            onClick={() => navigationContext.navigate('/personal')}
            className="demo3-link"
          >
            个人待办事项: {stats.personalTodos}
          </button>
        </li>
        <li>
          <button 
            onClick={() => navigationContext.navigate('/shopping')}
            className="demo3-link"
          >
            购物待办事项: {stats.shoppingTodos}
          </button>
        </li>
      </ul>
      
      <h3>最近添加</h3>
      <TodoList todos={recentTodos} navigationContext={navigationContext} />
    </div>
  );
}

export default Home; 